import * as React from 'react';
import Link from 'next/link';
import 'styles/header.scss';
import {useState} from 'react';

import logo from 'assets/images/amd.png';
import menu from 'assets/images/menu.svg';

interface IHeaderProps extends React.HtmlHTMLAttributes<HTMLDivElement>{
  title: string,
}

const Header: React.FC<IHeaderProps> = (props) => {
  const {title} = props;
  const [menuVisible, setMenuVisible] = useState(false);
  return (
    <header className="nav-header">
      <nav>
        <img src={logo} alt=""/>
        <div className="menu" onClick={() => setMenuVisible(!menuVisible)}>
          点击网申 {'>'} <img src={menu} alt=""/>
        </div>

      </nav>
      <div className="slogan">
        <span>{title}</span>
        <p>{props.children}</p>
        {menuVisible &&
        <div className="nav-wrapper">
          <div className="arrow"/>
          <Link href={'/'}><p>关于AMD</p></Link>
          <Link href={'/job'}><p>直通校招</p></Link>
          <Link href={'/market'}><p>聚焦市场与产品</p></Link>
        </div>
        }

      </div>
    </header>
  );
};

export default Header;